import React, {useEffect, useRef, useState} from 'react';
import {Card, Steps} from 'antd';
import {GridContent} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {getEmployeeChange,getNodeList} from '../service';
import {transferTypeList} from "@/utils/constant";
import moment from 'moment';

const Record = ({code}) => {
  const actionRef = useRef();
  const { Step } = Steps;
  const [data,setData] = useState([]);
  const [current,setCurrent] = useState(0);
  const columns = [
    {
      title: '异动开始日期',
      dataIndex: 'beginDate',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '异动结束日期',
      dataIndex: 'endDate',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '异动类型',
      dataIndex: 'recordType',
      hideInSearch: true,
      valueEnum: {
        0: { text: transferTypeList[0].label },
        1: { text: transferTypeList[1].label },
        2: { text: transferTypeList[2].label },
        3: { text: transferTypeList[3].label },
        4: { text: transferTypeList[4].label },
      },
    },
    {
      title: '异动前部门',
      dataIndex: 'oldDeptName',
      hideInSearch: true,
    },
    {
      title: '异动前管理职级',
      dataIndex: 'oldGLZJ',
      hideInSearch: true,
    },
    {
      title: '异动前专业职级',
      dataIndex: 'oldZYZJ',
      hideInSearch: true,
    },
    {
      title: '异动前岗位',
      dataIndex: 'oldJobName',
      hideInSearch: true,
    },
    {
      title: '异动后部门',
      dataIndex: 'newDeptName',
      hideInSearch: true,
    },
    {
      title: '异动后管理职级',
      dataIndex: 'newGLZJ',
      hideInSearch: true,
    },
    {
      title: '异动后专业职级',
      dataIndex: 'newZYZJ',
      hideInSearch: true,
    },
    {
      title: '异动后岗位',
      dataIndex: 'newJobName',
      hideInSearch: true,
    },
    {
      title: '操作时间',
      dataIndex: 'operateTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
  ];

  useEffect(() => {
    getNodeList(code).then(res => {
      setCurrent(res.length-1);
      setData(res);
    });
  }, []);

  return (
    <>
      <GridContent>
        <Card style={{ marginBottom: 24 }} bordered={false}>
          <Steps current={current}>
            {
              data.map((item,index) => {
                return (
                  <Step title={item.recordType} key={index} description={moment(item.beginDate).format('YYYY-MM-DD')}/>
                )
              })
            }
          </Steps>
        </Card>
        <ProTable
          actionRef={actionRef}
          rowKey="operateTime"
          search={false}
          style={{marginBottom: 24}}
          request={(params) => getEmployeeChange(params, code)}
          columns={columns}
          headerTitle="异动记录"
        />
      </GridContent>
    </>
  );
};
export default Record;
